<template>
    <div class="date-control-box">
        <el-date-picker :value="date" @input="changDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" :clearable="false" style="width:150px;display: block;">
        </el-date-picker>
        <el-time-select :value="time" @input="changTime" :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00',
        }" placeholder="选择时间" :clearable="false" style="width:150px;margin-top: 13px;display: block;">
        </el-time-select>
    </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
    name: "DateControl",
    props: {
        value: {
            type: [String, Date],
            default: undefined
        }
    },
    data() {
        return {
            date: undefined,
            time: undefined
        }
    },
    watch: {
        value() {
            this.dateTimeSplit()
        }
    },
    created() {
        this.dateTimeSplit()
    },
    methods: {
        dateTimeSplit() {
            if (this.value) {
                const dateTime = dayjs(this.value)
                this.date = dateTime.format('YYYY-MM-DD')
                this.time = dateTime.format('HH:mm')
            }
        },
        dateTimeJoint(format) {
            return dayjs(`${this.date} ${this.time}`, 'YYYY-MM-DD HH:mm').format(format)
        },
        changDate(value) {
            this.date = value
            value && this.time && this.$emit('input', this.dateTimeJoint('YYYY-MM-DD HH:mm:ss'))
        },
        changTime(value) {
            this.time = value
            value && this.date && this.$emit('input', this.dateTimeJoint('YYYY-MM-DD HH:mm:ss'))
        }
    }
}
</script>